import React, { Component } from "react";
import axios from 'axios'
import "./GrabActivity.scss"
import { Tabs } from "antd-mobile";
import { withRouter } from 'react-router-dom'


// import "./dance.scss";
class GrabActivity extends Component {
  state = {
    grabActivity1: [],
    grabActivity2: [],
    tabs: [
      { title: "13:00 已开抢",grab:[1]},
      { title: "16:00 已开抢" ,grab:[2]},
      { title: "19:00 已开抢" ,grab:[3]},
      { title: "22:00 已开抢",grab:[4] },
      { title: "00:00 人气新品" },
      { title: "10:00 快抢中" },
      { title: "13:00 即将开抢" },
      { title: "16:00 即将开抢" },
      { title: "19:00 即将开抢" },
      { title: "22:00 即将开抢" },
      { title: "00:00 明日开抢" },
      { title: "10:00 明日开抢" },
    ],
  };

  renderContent = (tab) => (
    <div>
    <div className="grab-flex-box">
      {this.state.grabActivity1.map((v,i) => {
        return (
          <div className="grabActivity-item" key={v.iid} onClick={this.goToNewDetail.bind(this,i)}>
            <div className="item-left">
              <img src={v.image} alt=""/>
            </div>
            <div className="item-right">
              <div className="right-title">{v.title}</div>
              <div className="remaining">
                <div className="progress-bar">
                  <div className="progress-percent" 
                    style={{width: 140 * v.sales / v.total}}>
                    {/* {v.sales} */}
                </div>
                </div>
                <span>仅剩<em className="remain">{v.left}</em>件</span>
              </div>
              <div className="right-bottom">
                <div className="bottom-left">
                  <em>￥</em>
                  <span className="salePrice">{v.salePrice}</span>
                  <span className="price">￥{v.price}</span>
                </div>
                <div className="bottom-right">
                  <div className="buy">立即购买</div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  
  <div className="grab-flex-box">
  {this.state.grabActivity2.map((v,i) => {
    return (
      <div className="grabActivity-item" key={v.iid} onClick={this.goToNewDetail.bind(this,i)}>
        <div className="item-left">
          <img src={v.image} alt=""/>
        </div>
        <div className="item-right">
          <div className="right-title">{v.title}</div>
          <div className="remaining">
            <div className="progress-bar">
              <div className="progress-percent" 
                style={{width:"140 * v.sales / v.total"}}>
                {/* {v.sales} */}
            </div>
            </div>
            <span>仅剩<em className="remain">{v.left}</em>件</span>
          </div>
          <div className="right-bottom">
            <div className="bottom-left">
              <em>￥</em>
              <span className="salePrice">{v.salePrice}</span>
              <span className="price">￥{v.price}</span>
            </div>
            <div className="bottom-right">
              <div className="buy">立即购买</div>
            </div>
          </div>
        </div>
      </div>
    );
  })}
</div>

</div>
  );

  componentDidMount() {
    axios.get("./json/GrabActivity1.json").then((res) => {
      let grabActivity1_str = res.data;
      let grabActivity1 = grabActivity1_str.data.list;
      this.setState({ 
        grabActivity1,
        // tabs.grab
       });
      // console.log(this.state.grabActivity1);
      // console.log(this.state.tabs[0].grab);

    });

    axios.get("./json/GrabActivity2.json").then((res) => {
      let grabActivity2_str = res.data;
      let grabActivity2 = grabActivity2_str.data.list;
      // // 过滤掉最后一个
      // grabActivity1 = grabActivity1.filter((item) => {
      //   return item.sort < 13;
      // });
      this.setState({ grabActivity2 });
      // console.log(this.state.grabActivity2);
    });
  }
   
  // renderContent = tab =>
  // // console.log(tab)
  //   (<div>
  //     <div className="abc">
  //     {tab.grab}
  //     </div>

  //   </div>);

  renderContent = (tab) => (
    <div>
      <div className="grab-flex-box">
        {this.state.grabActivity1.map((v, i) => {
          return (
            <div className="grabActivity-item" key={v.iid} onClick={this.gotoProductDeatails.bind(this, i)}>
              <div className="item-left">
                <img src={v.image} alt="" />
              </div>
              <div className="item-right">
                <div className="right-title">{v.title}</div>
                <div className="remaining">
                  <div className="progress-bar">
                    <div className="progress-percent"
                      style={{ width: 140 * v.sales / v.total }}>
                      {/* {v.sales} */}
                    </div>
                  </div>
                  <span>仅剩<em className="remain">{v.left}</em>件</span>
                </div>
                <div className="right-bottom">
                  <div className="bottom-left">
                    <em>￥</em>
                    <span className="salePrice">{v.salePrice}</span>
                    <span className="price">￥{v.price}</span>
                  </div>
                  <div className="bottom-right">
                    <div className="buy">立即购买</div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
        <div className="grab-flex-box">
          {this.state.grabActivity2.map((v, i) => {
            return (
              <div className="grabActivity-item" key={v.iid} onClick={this.gotoProductDeatails.bind(this, i)}>
                <div className="item-left">
                  <img src={v.image} alt="" />
                </div>
                <div className="item-right" key={v.iid}>
                  <div className="right-title">{v.title}</div>
                  <div className="remaining">
                    <div className="progress-bar">
                      <div className="progress-percent"
                        style={{ width: "140 * v.sales / v.total" }}>
                        {/* {v.sales} */}
                      </div>
                    </div>
                    <span>仅剩<em className="remain">{v.left}</em>件</span>
                  </div>
                  <div className="right-bottom">
                    <div className="bottom-left">
                      <em>￥</em>
                      <span className="salePrice">{v.salePrice}</span>
                      <span className="price">￥{v.price}</span>
                    </div>
                    <div className="bottom-right">
                      <div className="buy">立即购买</div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

      </div>



    </div>
  );
 


  

  // 跳转详情页
  // gotoProductDeatails = (index) => {
  //   this.props.history.push('/productDetails/' + index)
  // // 跳转商品详情页面
  // }
  goToNewDetail=(id)=>{
    this.props.history.push('/details/'+ "1msvj44")
  }

  render() {
    return (
      <div className="grabActivity">
        <div className="mall-grabActivity-tabs">
          <Tabs
            className="grabActivity-tabs"
            tabs={this.state.tabs}
            renderTabBar={(props) => <Tabs.DefaultTabBar {...props} page={5} />}
            tabBarUnderlineStyle={{ borderColor: "#fff" }}
            tabBarActiveTextColor="#fff"
          >
            {this.renderContent}
          </Tabs>
        </div>
      </div>
    );
  }
}

export default withRouter(GrabActivity);
